<script lang="tsx" setup>
import { ref } from 'vue';

defineOptions({
  name: 'AboutModal'
});
const visible = defineModel<boolean>('visible', {
  default: false
});
const aboutInfo = ref<any>({
  appName: 'Smart-Tools',
  copyRight: 'Copyright © 2023-2024 Smart-Tools',
  version: '1.0.0.BATE',
  buildTime: '2024-08-16',
  author: 'XXX 团队',
  license: '社区版',
  licenseUrl: 'https://www.hoviot.top',
  supportEmail: 'herther_xiang@163.com',
  runtime: '17.0.11',
  os: 'Windows 11',
  osVersion: '10.0'
});
</script>

<template>
  <NModal v-model:show="visible" title="关于" preset="card" class="w-740px" :footer-style="{ padding: '5px' }">
    <div class="h-280px w-100% flex flex-col flex-gap-10px">
      <div>
        <SystemLogo class="text-100px text-primary" />
      </div>
      <div class="mt-10px text-18px font-bold">{{ aboutInfo.appName }}</div>
      <div class="flex flex-row flex-gap-15px flex-items-center text-12px">
        <div>
          版本号：
          {{ aboutInfo.version }}
        </div>
        <div>
          发布时间：
          {{ aboutInfo.buildTime }}
        </div>
      </div>
      <div class="flex flex-row flex-gap-15px flex-items-center text-12px">
        <div>
          作者：
          {{ aboutInfo.author }}
        </div>
        <div>
          联系邮箱：
          {{ aboutInfo.supportEmail }}
        </div>
      </div>
      <div class="flex flex-row flex-gap-15px flex-items-center text-12px">
        <div>
          License：
          {{ aboutInfo.license }}
        </div>
        <div>
          License URL：
          {{ aboutInfo.licenseUrl }}
        </div>
      </div>
      <div class="flex flex-row flex-gap-15px flex-items-center text-12px">
        <div>
          环境版本：
          {{ aboutInfo.runtime }}
        </div>
        <div>
          系统：
          {{ aboutInfo.os }}
        </div>
        <div>
          系统版本：
          {{ aboutInfo.osVersion }}
        </div>
      </div>
    </div>
    <template #footer>
      <div class="h-full w-full flex flex-justify-center flex-items-center pt-5px">
        <div class="text-14px color-zinc-4">{{ aboutInfo.copyRight }}</div>
      </div>
    </template>
  </NModal>
</template>

<style lang="scss"></style>
